<template>
  <div>
    <el-card>
      <el-row type="flex" justify="space-between">
        <span style="color:red;font-size:12px;opacity:0.5">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" size="medium" @click="add">新增试题</el-button></el-row>

      <el-form ref="myform" :inline="true" :model="basicForm" :label-position="labelPosition">
        <el-form-item label="学科" label-width="100px" prop="subjectID">
          <el-select v-model="basicForm.subjectID" placeholder="请选择">
            <el-option v-for="item,index in simpleSubject" :key="index" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录" prop="catalog">
          <el-select v-model="basicForm.catalog" placeholder="请选择">
            <el-option v-for="item,index in questionList" :key="index" :value="item.catalog" :label="item.catalog" />
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="tags">
          <el-select v-model="basicForm.tags" placeholder="请选择">
            <el-option v-for="item,index in questionList" :key="index" :value="item.tags" :label="item.tags" />
          </el-select>
        </el-form-item>
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="basicForm.keyword" placeholder="根据题干搜索" />
        </el-form-item>
        <el-form-item label="试题类型" label-width="100px" prop="questionType">
          <el-select v-model="basicForm.questionType" placeholder="请选择">
            <el-option label="单选" value="单选" />
            <el-option label="多选" value="多选" />
            <el-option label="简答" value="简答" />
          </el-select>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-select v-model="basicForm.difficulty" placeholder="请选择">
            <el-option label="简单" value="简单" />
            <el-option label="一般" value="一般" />
            <el-option label="困难" value="困难" />
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select v-model="basicForm.direction" placeholder="请选择">
            <el-option v-for="item,index in questionList" :key="index" :value="item.direction" :label="item.direction" />
          </el-select>
        </el-form-item>
        <el-form-item label="录入人" prop="creatorID">
          <el-select v-model="basicForm.creatorID" placeholder="请选择">
            <el-option v-for="item,index in questionList" :key="index" :value="item.creatorID" :label="item.creatorID" />
          </el-select>
        </el-form-item>
        <el-form-item prop="remarks" label="题目备注" label-width="100px">
          <el-input v-model="basicForm.remarks" />
        </el-form-item>
        <el-form-item style="margin-left:10px" label="企业简称" prop="shortName">
          <el-input v-model="basicForm.shortName" />
        </el-form-item>

        <el-form-item
          label="城市"
          prop="userCitys"
        >
          <el-select
            v-model="basicForm.userCitys"
            placeholder="请选择"
            @change="hchangecity"
          >
            <el-option
              v-for="(item, index) in basicForm.citys"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
          --
          <el-select
            v-model="basicForm.usercitys2"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in basicForm.citys2"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <el-button style="margin-left:20px" plain size="small" @click="clear">清除</el-button>
        <el-button type="primary" size="small" @click="search">搜索</el-button>
      </el-form>

      <el-alert
        :title="`数据一共${page.total}条`"
        type="info"
        show-icon
      />
    </el-card>

    <el-card>

      <el-table
        :data="questionList"
        style="width: 100%"
      >
        <el-table-column
          prop="number"
          label="试题编号"
          width="130"
        />
        <el-table-column
          prop="subject"
          label="学科"
          width="130"
        />
        <el-table-column
          prop="catalog"
          label="目录"
          width="60"
        />
        <el-table-column
          prop="questionType"
          label="题型"
          :formatter="questionTypefn"
          width="60"
        />
        <el-table-column
          prop="question"
          label="题干"
        />
        <el-table-column
          label="录入时间"
        >
          <template v-slot="scope">
            {{ scope.row.addDate | formatDate }}
          </template></el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          :formatter="difficultyFn"
          width="60"
        />
        <el-table-column
          prop="creatorID"
          label="录入人"
          :formatter="creatorFn"
          width="80"
        />
        <el-table-column
          label="操作"
        >
          <template v-slot="scope">
            <el-row type="flex" justify="start">
              <el-button plain type="primary" icon="el-icon-view" circle @click="onPreview(scope.row.id)" />
              <el-button plain type="success" icon="el-icon-edit" circle @click="jumptonew(scope.row.id)" />
              <el-button plain type="danger" icon="el-icon-delete" circle @click="delQuestion(scope.row.id)" />
              <el-button plain type="warning" icon="el-icon-check" circle @click="toSelectedQ(scope.row.id)" />
            </el-row>

          </template>

        </el-table-column>
      </el-table>

      <el-row type="flex" justify="end">
        <el-pagination
          :current-page="page.page"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="page.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>

      <preview ref="preview" :detail-question-list="detailQuestionList" :dialog-visible.sync="dialogVisible" />

    </el-card>
  </div>
</template>

<script >
import { getQuestionList, getSimpleSubjectList, getDetailQustion, delBasicQustion, addtoSelectedQuestion } from '@/api/question/index'
import preview from '@/views/question/basicQuestion/preview.vue'
import numTowords from '@/views/question/numTowords'
// 导入城市接口
import { provinces, citys } from '@/api/question/citys'
export default {
    components: {
        preview
    },
    data() {
        return {
            detailQuestionList: {},
            dialogVisible: false,
            simpleSubject: [],
            direction: [],
            creatorID: [],
            questionList: [],
            page: {
              page: 1,
              pagesize: 10,
              total: 0
            },
            basicForm: {
                subjectID: '',
                catalog: [],
                tags: '',
                keyword: '',
                questionType: '',
                difficulty: '',
                direction: '',
                creatorID: '',
                remarks: '',
                shortName: '',
                city: [],
                city2: [],
                userCitys: '',
                userCitys2: '',
                region: ''
            },
          labelPosition: 'right',
          toSelectedData: {}

        }
    },
  watch: {
     // 监听 城市省份的变化
  'basicForm.userCitys': {
     async handler(newValue) {
        const res = await citys(newValue)
      this.basicForm.citys2 = res
      },
      immediate: true
      }
    },
    created() {
       this.getQuestionList(this.page)
      this.getSimpleSubjectList()
      this.loadCitys()
  },
  methods: {
    add() {
      this.$router.push('/question/new')
    },
    // 当城市更换的时候将后面的城区清空
    hchangecity() {
      this.basicForm.usercitys2 = ''
    },
    async loadCitys() {
      try {
        const res = await provinces()
        // console.log(res)
        this.basicForm.citys = res
      } catch (err) {
        console.log(err)
      }
    },
    // 清空表单
    clear() {
      this.$refs.myform.resetFields()
      this.getQuestionList(this.page)
    },
    // 搜索
    search() {
      this.getQuestionList({ ...this.basicForm, ...this.page })
    },
    handleCurrentChange(num) {
      // console.log(num)
      this.page.page = num
      this.getQuestionList(this.page)
    },
    handleSizeChange(val) {
      this.page.pagesize = val
      this.getQuestionList(this.page)
    },
    // 获取基础题库列表
    async getQuestionList(page) {
      const res = await getQuestionList(page)
      this.questionList = res.items
      res.items.forEach((item) => {
        item.answer = this.delHtmlTag(item.answer)
        item.question = this.delHtmlTag(item.question)
      })
      this.page.total = res.counts
      console.log('基础题库列表', this.questionList)
    },
    delHtmlTag(str) {
      return str.replace(/<[^>]+>/g, '').replace(/&nbsp;/ig, '')
    },
    // 获取学科简单列表
    async getSimpleSubjectList() {
      const res = await getSimpleSubjectList()
      console.log('学科简单列表', res)
      this.simpleSubject = res
    },
   // 加入移出精选
   async addtoSelectedQuestion(data) {
     await addtoSelectedQuestion(data)
    },
    // 加入精选题库
   async toSelectedQ(id) {
     console.log(id, '当前点击题目信息')
     try {
        await this.$confirm('确认加入精选题库吗？')
        this.addtoSelectedQuestion({ id: id, choiceState: 1 })
        this.getQuestionList(this.page)
        this.$message({ message: '加入精选题库成功', type: 'success' })
     } catch (err) {
        console.log(err)
      }
    },
    // 预览弹框
   async onPreview(id) {
      this.dialogVisible = true
      this.$refs.preview.detailQuestionList = await getDetailQustion(id)
    },
    // 当前点击题目详情
    async getDetailQustion(id) {
      const res = await getDetailQustion(id)
      console.log('基础题库详情', res)
      this.detailQuestionList = res
    },
    // 基础题库删除
   async delQuestion(id) {
      // console.log(id)
     try {
      await this.$confirm('确认删除吗？')
      await delBasicQustion(id)
       this.getQuestionList()
       this.$message('删除成功')
     } catch (err) {
        console.log(err)
     }
    },
    // 跳转到录入
    jumptonew(id) {
      this.$router.push({ path: '/question/new', query: { id }})
    },
    // 难度
    difficultyFn(row, column, cellValue, index) {
       const obj = numTowords.difficulty.find((item) => {
       return item.id === cellValue
    })
       return obj ? obj.value : '未知'
    },
      // 题型
    questionTypefn(row, column, cellValue, index) {
       const obj = numTowords.questionType.find((item) => {
       return item.id === cellValue
    })
       return obj ? obj.value : '未知'
    },
    // 录入人
    creatorFn(row, column, cellValue, index) {
        const obj = numTowords.creator.find((item) => {
       return item.id === cellValue
    })
      return obj ? obj.value : '其他'
      }

    }
}

</script>

<style lang="scss" scoped>

</style>